<template>
    <div>
        <div class="noBadgeButton" v-if="!propJson.isAddBadge">
            <el-button
                :type="propJson.type"
                :plain="propJson.plain"
                :round="propJson.round"
                :size="propJson.size"
                :icon="propJson.iconBefore"
                v-if="!propJson.circle"
                @click="buttonClick"
                :loading="buttonClickLoading"
                :color="propJson.isCustomColor ? propJson.customColor : ''"
                style="width: 100%"
            >
                {{propJson.buttonName}}
                <el-icon class="el-icon--right" v-if="propJson.iconAfter !== ''">
                    <component :is="propJson.iconAfter" />
                </el-icon>
            </el-button>

            <el-button
                :type="propJson.type"
                :plain="propJson.plain"
                :round="propJson.round"
                :size="propJson.size"
                :icon="propJson.iconOnly"
                :circle="true"
                v-if="propJson.circle"
                @click="buttonClick"
                :loading="buttonClickLoading"
            >
            </el-button>
        </div>

        <div class="addBadgeButton" v-if="propJson.isAddBadge" :info="getBadgeValue">
            <el-badge :value="badgeValue" :is-dot="propJson.badgeIsBot" :max="propJson.badgeMaxNum"
                      v-if="!propJson.circle" style="width: 98%" :type="propJson.badgeType">
                <el-button
                    :type="propJson.type"
                    :plain="propJson.plain"
                    :round="propJson.round"
                    :size="propJson.size"
                    :icon="propJson.iconBefore"
                    v-if="!propJson.circle"
                    @click="buttonClick"
                    :loading="buttonClickLoading"
                    :color="propJson.isCustomColor ? propJson.customColor : ''"
                    style="width: 100%"
                >
                    {{propJson.buttonName}}
                    <el-icon class="el-icon--right" v-if="propJson.iconAfter !== ''">
                        <component :is="propJson.iconAfter" />
                    </el-icon>
                </el-button>
            </el-badge>

            <el-badge :value="badgeValue" :is-dot="propJson.badgeIsBot" :max="propJson.badgeMaxNum"
                      v-if="propJson.circle" style="width: 100%" :type="propJson.badgeType">
                <el-button
                    :type="propJson.type"
                    :plain="propJson.plain"
                    :round="propJson.round"
                    :size="propJson.size"
                    :icon="propJson.iconOnly"
                    :circle="true"
                    v-if="propJson.circle"
                    @click="buttonClick"
                    :loading="buttonClickLoading"
                >
                </el-button>
            </el-badge>
        </div>

    </div>
</template>

<script setup name="ButtonComponent" lang="ts">
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {ElNotification} from "element-plus";
import {computed, defineProps, ref} from "vue";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let selfCommonParam = ref("");
let buttonClickLoading = ref(false);
let badgeValue = ref("new");

let getBadgeValue = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.badgeValue, commonParam.value, execBadgeValueThen, execBadgeValueCatch, null)
})

selfCommonParam.value = commonParam.value;

function execThen(execParam) {

}

function execCatch(execParam) {
    if (execParam.isLoading) {
        buttonClickLoading.value = false
    }
}

async function buttonClick() {
    // 编辑模式不触发点击事件
    if (propJson.value.editFlag) {
        return
    }

    if (propJson.value.isLoading) {
        buttonClickLoading.value = true
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(propJson.value.clickAction, awaitObj, commonParam.value, execThen, execCatch, propJson.value);
    await doRealExec();
}

async function doRealExec() {
    if (propJson.value.isLoading) {
        buttonClickLoading.value = false
    }

    if (propJson.value.isAddMessage) {
        ElNotification({
            title: '执行成功',
            message: "Success",
            type: 'success',
        })
    }
}

function execBadgeValueThen(resValue) {
    badgeValue.value = parseInt(resValue)
}

function execBadgeValueCatch(resValue) {

}
</script>

<style scoped lang="less">

</style>